import React, { useCallback, useState } from "react";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";
import TextAtom from "../../Atoms/Text.Atom";
import InputAtom from "../../Atoms/Input.Atom";
import { InputAtomEnum } from "../../Atoms/Input.Atom/enum";
import ButtonAtom from "../../Atoms/Button.Atom";
import ButtonAtomEnum from "../../Atoms/Button.Atom/enum";
import { useAddAdminProduct } from "@/business.InterfaceLayer/hooks/store/useAdminQueryStore/mutation/useAddAdminProduct";
import { AdminAddModalProps, AdminAddProductData } from "./type";

const AdminAddModal: React.FC<AdminAddModalProps> = (props) => {
  const { t, onClickClose } = props;
  const addProductMutation = useAddAdminProduct();
  const [formData, setFormData] = useState({
    product_id: "",
    title: "",
    category: 0,
    refinement: 0,
    brand: 0,
    des: "",
    price: 10,
    colors: "",
    size: 0,
    img_paths: "",
  });

  const handleSubmit = useCallback(async () => {
    try {
      // Преобразуем product_id в число перед отправкой на сервер
      const newFormData = {
        product_id: parseInt(formData.product_id),
        title: formData.title,
        category: formData.category || null,
        refinement: formData.refinement || null,
        brand: formData.brand || null,
        des: formData.des || null,
        price: formData.price || null,
        colors: formData.colors || null,
        size: formData.size || null,
        img_paths: formData.img_paths || null,
      };

      await addProductMutation.mutateAsync(newFormData as AdminAddProductData);
      onClickClose?.(); // Закрываем модальное окно после успешного добавления товара
    } catch (error) {
      console.error("Error adding product:", error);
    }
  }, [
    addProductMutation,
    formData.brand,
    formData.category,
    formData.colors,
    formData.des,
    formData.img_paths,
    formData.price,
    formData.product_id,
    formData.refinement,
    formData.size,
    formData.title,
    onClickClose,
  ]);

  const handleChange = (field: string, value: string | number) => {
    setFormData((prevFormData) => ({
      ...prevFormData,
      [field]: value,
    }));
  };

  return (
    <>
      <div className="flex overflow-y-auto flex-col gap-3 max-h-60">
        <TextAtom type={TextAtomEnum.enum_h3}>
          {t?.("AdminPage.productPage.modalWindow.addProducts.labelId.title")}
        </TextAtom>
        <InputAtom
          type={InputAtomEnum.NUMBER}
          placeholder={t?.(
            "AdminPage.productPage.modalWindow.addProducts.labelId.placeholder"
          )}
          value={formData.product_id}
          onChange={(value: number) => handleChange("product_id", value)}
          max={2147483647}
        />
        <TextAtom type={TextAtomEnum.enum_h3}>
          {t?.(
            "AdminPage.productPage.modalWindow.addProducts.labelTitle.title"
          )}
        </TextAtom>
        <InputAtom
          type={InputAtomEnum.TEXT}
          placeholder={t?.(
            "AdminPage.productPage.modalWindow.addProducts.labelTitle.placeholder"
          )}
          value={formData.title}
          onChange={(value: string) => handleChange("title", value)}
        />
      </div>
      <div className="flex gap-5 justify-end mt-5">
        <ButtonAtom
          className="inline-flex items-center gap-2 bg-transparent text-textColor ring-[1px] ring-black ring-inset hover:ring-peach py-2 px-3 rounded-full"
          type={ButtonAtomEnum.enum_defaultButton}
          onClick={onClickClose}
        >
          <TextAtom className="uppercase" type={TextAtomEnum.enum_h5}>
            {t?.("AdminPage.productPage.modalWindow.addProducts.button.cancel")}
          </TextAtom>
        </ButtonAtom>
        <ButtonAtom
          className="inline-flex items-center gap-2 bg-[#fd784c] hover:bg-peach text-white py-2 px-3 rounded-full"
          type={ButtonAtomEnum.enum_defaultButton}
          onClick={handleSubmit}
        >
          <TextAtom className="uppercase" type={TextAtomEnum.enum_h5}>
            {t?.("AdminPage.productPage.modalWindow.addProducts.button.add")}
          </TextAtom>
        </ButtonAtom>
      </div>
    </>
  );
};
export default React.memo(AdminAddModal);
